<!DOCTYPE html>
<html>
<head>
    <title>Q版班级积分系统</title>
    <!-- 新增Excel导出库 -->
    <script src="https://cdn.sheetjs.com/xlsx-0.20.0/package/dist/xlsx.full.min.js"></script>
    <style>
        :root {
            --primary-color: #6ab0de;
            --secondary-color: #88d8b0;
        }
        
        body {
            font-family: 'Comic Sans MS', cursive;
            background: #f9f9f9;
            padding: 20px;
        }
        
        .container {
            display: grid;
            grid-template-columns: 3fr 1fr;
            gap: 20px;
            max-width: 1200px;
            margin: 0 auto;
        }

        .student-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
            gap: 15px;
        }

        .student-card, .reward-card {
            background: white;
            border-radius: 15px;
            padding: 15px;
            box-shadow: 0 3px 6px rgba(0,0,0,0.1);
            border: 3px solid var(--primary-color);
        }

        .controls {
            display: flex;
            gap: 10px;
            margin: 10px 0;
        }

        button {
            background: var(--primary-color);
            border: none;
            padding: 6px 12px;
            border-radius: 20px;
            color: white;
            cursor: pointer;
            transition: 0.3s;
        }

        button:hover {
            transform: scale(1.05);
            background: var(--secondary-color);
        }

        .batch-controls {
            margin: 20px 0;
            padding: 15px;
            background: #fff3d6;
            border-radius: 10px;
        }
    </style>
</head>

<body>
    <div class="container">
        <!-- 学生管理区域 -->
        <div>
            <div class="batch-controls">
                <button onclick="batchAddPoints(1)">全体+1分</button>
                <button onclick="batchAddPoints(-1)">全体-1分</button>
                <button onclick="addStudent()">➕ 添加学生</button>
                <!-- 新增导出按钮 -->
                <button onclick="exportToExcel()" style="background:#9c27b0">📤 导出数据</button>
            </div>
            <div class="student-grid" id="students"></div>
        </div>

        <!-- 奖励管理区域 -->
        <div>
            <div class="reward-card">
                <h3>🎁 奖品商店</h3>
                <div id="rewards"></div>
                
                <!-- 新增积分排行榜 -->
                <div class="ranking" style="margin-top:20px; background:#ffe6f0; border-radius:10px; padding:15px;">
                    <h4>🏆 积分排行榜 TOP 10</h4>
                    <div id="rankingList"></div>
                </div>
                
                <div class="controls">
                    <input id="rewardName" placeholder="奖品名称">
                    <input id="rewardCost" type="number" placeholder="所需兑换币">
                    <button onclick="addReward()">添加奖品</button>
                </div>
            </div>
        </div>
    </div>

<script>
// 初始化数据存储
let students = JSON.parse(localStorage.getItem('students')) || 
    Array.from({length:50}, (_,i) => ({
        id: i+1,
        name: `学生${i+1}`,
        points: 0,
        coins: 0
    }));

let rewards = JSON.parse(localStorage.getItem('rewards')) || [
    {name: "小贴纸", cost: 10, stock: 5},
    {name: "文具套装", cost: 30, stock: 3}
];

// 保存数据到本地存储
function saveData() {
    localStorage.setItem('students', JSON.stringify(students));
    localStorage.setItem('rewards', JSON.stringify(rewards));
}

// 学生操作功能
function updateStudent(id, field, delta) {
    const student = students.find(s => s.id === id);
    if (student) {
        student[field] += delta;
        // 积分和兑换币联动
        if (field === 'points') student.coins += delta;
        saveData();
        renderAll();
    }
}

// 批量加减分
function batchAddPoints(delta) {
    students.forEach(s => {
        s.points += delta;
        s.coins += delta;
    });
    saveData();
    renderAll();
}

// 兑换奖励
function redeemReward(studentId, rewardIndex) {
    const student = students.find(s => s.id === studentId);
    const reward = rewards[rewardIndex];
    
    if (student.coins >= reward.cost && reward.stock > 0) {
        student.coins -= reward.cost;
        reward.stock--;
        saveData();
        renderAll();
    }
}

// 渲染功能
function renderAll() {
    renderStudents();
    renderRewards();
    renderRanking(); // 新增排行榜渲染
}

// 新增排行榜渲染函数
function renderRanking() {
    const sorted = [...students].sort((a, b) => b.points - a.points).slice(0, 10);
    const container = document.getElementById('rankingList');
    container.innerHTML = sorted.map((s, i) => `
        <div style="display:flex; justify-content: space-between; padding:5px; 
                   ${i%2 ? 'background:#fff8f8' : ''}">
            <span>${i+1}. ${s.name}</span>
            <span>${s.points}分</span>
        </div>
    `).join('');
}

function renderStudents() {
    const container = document.getElementById('students');
    container.innerHTML = students.map(student => `
        <div class="student-card">
            <h4>🎒 学号${student.id}</h4>
            <input value="${student.name}" 
                   onchange="updateName(${student.id}, this.value)">
            <p>积分: ${student.points}</p>
            <p>兑换币: ${student.coins}</p>
            <div class="controls">
                <button onclick="updateStudent(${student.id}, 'points', 1)">➕</button>
                <button onclick="updateStudent(${student.id}, 'points', -1)">➖</button>
                <button onclick="deleteStudent(${student.id})">🗑️</button>
            </div>
        </div>
    `).join('');
}

function renderRewards() {
    const container = document.getElementById('rewards');
    container.innerHTML = rewards.map((reward, i) => `
        <div class="reward-item">
            <p>${reward.name} (需要 ${reward.cost}币) 剩余: ${reward.stock}</p>
            <button onclick="redeemReward(${students[0].id}, ${i})">兑换</button>
            <button onclick="deleteReward(${i})">删除</button>
        </div>
    `).join('');
}

// 其他操作函数
function addStudent() {
    const newId = students.length ? Math.max(...students.map(s => s.id)) + 1 : 1;
    students.push({
        id: newId,
        name: `新同学`,
        points: 0,
        coins: 0
    });
    saveData();
    renderAll();
}

function deleteStudent(id) {
    students = students.filter(s => s.id !== id);
    saveData();
    renderAll();
}

function updateName(id, newName) {
    const student = students.find(s => s.id === id);
    if (student) {
        student.name = newName;
        saveData();
    }
}

function addReward() {
    const name = document.getElementById('rewardName').value;
    const cost = parseInt(document.getElementById('rewardCost').value);
    if (name && cost > 0) {
        rewards.push({name, cost, stock: 1});
        saveData();
        renderAll();
    }
}

function deleteReward(index) {
    rewards.splice(index, 1);
    saveData();
    renderAll();
}

// 初始化渲染
renderAll();

// 在JavaScript底部新增导出函数
function exportToExcel() {
    // 准备数据
    const data = students.map(s => ({
        "姓名": s.name,
        "积分": s.points,
        "兑换币": s.coins
    }));

    // 创建工作表
    const ws = XLSX.utils.json_to_sheet(data);
    
    // 创建工作簿并添加工作表
    const wb = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, ws, "学生积分");
    
    // 生成文件并下载
    const dateStr = new Date().toISOString().split('T')[0];
    XLSX.writeFile(wb, `积分数据-${dateStr}.xlsx`);
}
</script>
</body>
</html>